<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="boxLogin f f-a-c f-j-c">
			<div class="topTit">
				<div class="name">Sign in to KnowClub</div>
				<div class="inpBox">
					<div class="inpTit">Email</div>
					<input type="text" class="inp" placeholder="Enter your email address" v-model="email" name="" id="" />
				</div>
				<div class="inpBox">
					<div class="inpTit f f-a-c f-j-b">
						<div>Password</div>
						<span @click="forgot" class="hand">Forgot?</span>
					</div>
					<input type="password" class="inp" placeholder="Create password" v-model="password" name="" id="" />
				</div>
				<!-- btn -->
				<div @click="login" class="btn hand">Sign In</div>
				<div class="botSignUp f f-a-c f-j-c">Don't have an account? <span @click="goSign" class="hand">Sign up</span></div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { Login } from "@/api/login.js";
	import { LoginXp } from "@/api/knowClub/index.js";
	import { ElMessage } from "element-plus";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { useRoute } from "vue-router";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let route = useRoute();
	// 路径参数
	let pathAct = route.query.act; //xp、kc
	let email = ref("");
	let password = ref("");
	let home = localStorage.getItem("home") || 1;
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const forgot = () => {
		router.push({
			path: "/Login/Forgot",
			query: {
				act: pathAct
			}
		});
	};
	const login = async () => {
		if (pathAct == "xp") {
			// xp登录
			let n = await Login({ email: email.value, password: password.value });
			if (n.code == 200) {
				localStorage.setItem("logininfo", JSON.stringify(n.data));
				// 存储token
				localStorage.setItem("xpToken", n.data.accessTokenXp);
				localStorage.setItem("kcToken", n.data.accessTokenKc);
				ElMessage({
					message: n.msg,
					type: "success"
				});
				setTimeout(() => {
					if (home == 1) {
						// 这里是把导航
						localStorage.setItem("ind", 3);
						// 跳转到xpert首页
						router.replace("/");
					} else {
						localStorage.setItem("ind", 6);
						// 跳转到knowclub首页
						router.replace("/KnowClub");
					}
				}, 1000);
			}
		} else {
			// kc登录
			let n = await LoginXp({ email: email.value, password: password.value });
			if (n.code == 200) {
				localStorage.setItem("logininfo", JSON.stringify(n.data));
				// 存储token
				localStorage.setItem("xpToken", n.data.accessTokenXp);
				localStorage.setItem("kcToken", n.data.accessTokenKc);
				ElMessage({
					message: n.msg,
					type: "success"
				});
				setTimeout(() => {
					if (home == 1) {
						// 这里是把导航
						localStorage.setItem("ind", 3);
						// 跳转到xpert首页
						router.replace("/");
					} else {
						localStorage.setItem("ind", 6);
						// 跳转到knowclub首页
						router.replace("/KnowClub");
					}
				}, 1000);
			}
		}
	};
	// 跳转到 注册页面
	const goSign = () => {
		router.push({
			path: "/Login/SignUp",
			query: {
				act: pathAct
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
